import * as React from 'react';
import {useState,Component} from 'react';
import { Icon, IStyleSet,Checkbox,Label,Link,ILinkStyles,ILabelStyles,Pivot, IPivotItemProps,IPivotStyles,PivotItem,mergeStyleSets } from '@fluentui/react';
import http from './RequestUtl.ts';
import TriggerDetl from './TriggerDetl.tsx';

const pivotStyles:Partial<IPivotStyles>={
  root: {
      width:90,
      // backgroundColor:'#ebebeb',
      backgroundImage:'linear-gradient(to right,#ebebeb, #ebebeb 90%, #dfdfdf)'
  },
  link:{
      display:'block',
      width:90,
      padding:'5px 0px',
      height:'auto',
      fontSize:12,
      color:'#616161',
  },
  linkIsSelected:{
      color:'#0078d4',
  },
  icon:{
      display:'block',
      height: 20,
      fontSize: 25,
  }
}
const pivotitemClass='pivotitems_ver';
const labelStyles: Partial<IStyleSet<ILabelStyles>> = {
root: { marginTop: 10 },
};
 
class JobTrigger extends Component { 
  constructor(props){
    super(props); 
    this.state={
      triggers:props.triggers,
    }
  }


  render(){
    return (
      <Pivot aria-label="Basic Pivot Example">
        {
          this.state.triggers.map((v, i) => {
            // 调用子组件 循环的也是子组件
            return <PivotItem headerText={v.triggerId} key={i}>
              <TriggerDetl detailData={v}></TriggerDetl>
            </PivotItem>
          }) 
        }
      </Pivot>
    );
  }
  componentDidMount(){
    const Me=this;
  }

  clickOntrigger(this,ev: React.MouseEvent<unknown>){
    const Me=this;
    const jobId=ev.currentTarget.attributes["data-jobid"].value;
    console.log("查看触发器详情====="+jobId);
    Me.setState({triggerisOpen:true});
  }
};
export default JobTrigger